<!-- 登录界面 -->
<template>
  <div class="box">
    <el-form  label-width="100px" class="demo-ruleForm from" label-position="top" v-model="form">
      <h3>用户登录</h3>
      <el-form-item label="用户名" prop="name" class="width">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
       <el-form-item label="密码" prop="name" class="width">
        <el-input  v-model="form.password"></el-input>
      </el-form-item>
        <el-button type="primary"  class="denglu" @click="test">登录</el-button>
    </el-form>
  </div>
</template>

<script>
import {request} from "network/request.js"

export default {
    name:"login",
    data () {
      return {
         form:{
            name:"",
            password:""
         }
      }
    },
    methods: {
      //验证用户输入的是否正确  不管正确还是错误都会返回对应的数据
       test(){
         console.log(11111)
          request({
            url:"/login",
            //接口需要传递的参数
            params: {
              username:this.form.name,
              password:this.form.password
             }
          }).then(res=>{
            if(res.data.meta.status==400){
               alert(res.data.meta.msg)
               this.form.name=""
               this.form.password=""
            }else{
              //进入主页面的时候 把token值放入 localstore中
              localStorage.setItem("token",res.data.data.token)
                this.$router.push("/Home")
            }
          }).catch(rej=>{
          })
       }
    }
}

</script>
<style  scoped>
   .box{
        height: 100%;
        background: #324152;
        display: flex;
        justify-content: center;
        align-items: center;
   }
 .from{
   width: 500px;
   background: white;
 }
 h3{
     margin-left: 20px;
 }
   .width{
     width:250px;
     margin-left: 20px;
   }
   .denglu{
     margin-left: 20px;
   }
</style>